<template>
  <div class="details container">
    <h1 class="page-header">
      <router-link to="/" class="btn btn-success">返回</router-link>
      <span style="float:right">
        <router-link class="btn btn-primary" :to="'/edit/' + customer.id">
          编辑
        </router-link>
        &nbsp;
        <button class="btn btn-danger" @click="deleteCustomer">
          删除
        </button>
      </span>
    </h1>
    <br />
    <ul class="list-group">
      <li class="list-group-item">
        <i class="fa fa-user" aria-hidden="true"></i>
        &nbsp;&nbsp;{{ customer.name }}
      </li>
      <li class="list-group-item">
        <i class="fa fa-phone" aria-hidden="true"></i>
        &nbsp;&nbsp;{{ customer.phone }}
      </li>
      <li class="list-group-item">
        <i class="fa fa-envelope-open" aria-hidden="true"></i>
        &nbsp;&nbsp;{{ customer.email }}
      </li>
      <li class="list-group-item">
        <i class="fa fa-meetup" aria-hidden="true"></i>
        &nbsp;&nbsp;{{ customer.education }}
      </li>
      <li class="list-group-item">
        <i class="fa fa-superpowers" aria-hidden="true"></i>
        &nbsp;&nbsp;{{ customer.graduationschool }}
      </li>

      <li class="list-group-item">
        <i class="fa fa-window-restore" aria-hidden="true"></i>
        &nbsp;&nbsp;{{ customer.profession }}
      </li>
      <li class="list-group-item">
        <i class="fa fa-wpexplorer" aria-hidden="true"></i>
        &nbsp;&nbsp;{{ customer.profile }}
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { useRoute, useRouter } from "vue-router";
import { onMounted, ref } from "vue";
import axios from "axios";
export default {
  setup() {
    const router = useRouter();
    const route = useRoute();
    const customer = ref<Object>({});
    onMounted(async () => {
      let res = await axios.get(
        "http://localhost:3000/users/" + route.params.id
      );
      // console.log(res.data);
      customer.value = res.data;
    });

    const deleteCustomer = async () => {
      let res = await axios.delete(
        "http://localhost:3000/users/" + route.params.id
      );
      // router.push("/");
      router.push({ path: "/", query: { alert: "用户信息删除成功！" } });
    };

    return { customer, deleteCustomer };
  },
};
</script>

<style lang="scss" scoped></style>
